import React, { Component } from "react";
import { getHomeGoodslist } from "../../api";
import { WhiteSpace, WingBlank, Flex, Button } from "antd-mobile";
import { withRouter } from "react-router-dom";

// 首页商品列表区域
class HomeList extends Component {
    state = {
        homeList: null, // 商品信息
    };

    render() {
        let { homeList } = this.state;
        let { history } = this.props;
        return (
            <div className="goodslist">
                {homeList &&
                    homeList.map((item, index) => (
                        <div className="goods" key={index}>
                            {/* WhiteSpace表示上下留白 */}
                            <WhiteSpace size="sm" />
                            <img
                                src={item.group_img}
                                alt=""
                                className="img-header"
                            />
                            {/* WIngBlank 两翼留白 */}
                            <WingBlank size="sm">
                                {/* 采用Flex布局 */}
                                <Flex justify="between" wrap="wrap">
                                    {item.goods.map((val) => (
                                        <div
                                            className="good"
                                            key={val.goods_id}
                                            onClick={() => history.push(
                                                "/detail/" + val.goods_id
                                            )}
                                        >
                                            <img
                                                src={val.goods_small_logo}
                                                alt=""
                                            />
                                            <div className="describe">
                                                {val.goods_name}
                                            </div>
                                            <div className="price">
                                                &yen;{val.goods_price}
                                            </div>
                                            <Button
                                                size="small"
                                                style={{
                                                    border:
                                                        "1px solid deepskyblue",
                                                    margin: "10px 0 0",
                                                    color: "deepskyblue",
                                                }}
                                            >
                                                找相似
                                            </Button>
                                        </div>
                                    ))}
                                </Flex>
                            </WingBlank>
                        </div>
                    ))}
            </div>
        );
    }

    async componentDidMount() {
        // 获取商品列表
        let list = await getHomeGoodslist();
        this.setState({
            homeList: list.data.message,
        });
    }
}

export default withRouter(HomeList);
